<template>
  <div class="daily-record-container">
    <div class="page-header">
      <h1>今日心情晴雨表 🌈</h1>
      <p>今天的感觉怎么样？快来画下你的心情吧~</p>
    </div>

    <!-- 今日记录卡片 -->
    <div class="today-record-card">
      <div class="card-header">
        <h2>今日记录 ({{ formatDate(today) }})</h2>
        <span :class="['status-badge', todayRecord ? 'recorded' : 'pending']">
          {{ todayRecord ? '已记录' : '待记录' }}
        </span>
      </div>

      <!-- 今日记录表单 -->
      <form @submit.prevent="saveTodayRecord" class="record-form">
        <div class="form-grid">
          <div class="form-group">
            <label for="mood">此刻的心情 →</label>
            <div class="mood-selector">
              <div 
                v-for="(option, key) in moodOptions" 
                :key="key"
                :class="['mood-option', { active: todayForm.mood === key }]"
                @click="selectMood(key)"
                :title="option.text"
              >
                <span class="mood-emoji">{{ option.emoji }}</span>
                <span class="mood-label">{{ option.text }}</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label for="cravings">烟瘾小怪兽现在多大只？(◔‸◔？)</label>
            <div class="slider-group">
              <input
                id="cravings"
                v-model.number="todayForm.cravings_intensity"
                type="range"
                min="0"
                max="10"
                step="1"
                class="slider"
              />
              <div class="slider-info">
                <span class="slider-min">0</span>
                <span class="slider-value">{{ todayForm.cravings_intensity }}/10</span>
                <span class="slider-max">10</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="checkbox-label">
              <input
                v-model="todayForm.relapsed"
                type="checkbox"
                @change="onRelapseChange"
              />
              今日是否复吸
            </label>
          </div>

          <div v-if="todayForm.relapsed" class="form-group">
            <label for="cigarettes-smoked">吸烟数量</label>
            <input
              id="cigarettes-smoked"
              v-model.number="todayForm.cigarettes_smoked"
              type="number"
              min="0"
              max="100"
              placeholder="请输入吸烟支数"
            />
          </div>
        </div>

        <div class="form-group">
          <label for="notes">想说点什么吗？（可选）</label>
          <textarea
            id="notes"
            v-model="todayForm.notes"
            rows="3"
            placeholder="写下你的戒烟理由吧~ 是为了更健康的身体、心爱的家人，还是省下钱去买想要的东西呢？(◕‿◕)"
          ></textarea>
        </div>

        <button type="submit" class="save-btn" :disabled="loading">
          {{ loading ? '保存中...' : '保存日记 💾' }}
        </button>
      </form>
    </div>

    <!-- 历史记录 -->
    <div class="history-section">
      <div class="section-header">
        <h2>历史记录</h2>
        <div class="filter-controls">
          <select v-model="filterDays" @change="loadRecords">
            <option value="7">最近7天</option>
            <option value="30">最近30天</option>
            <option value="90">最近90天</option>
            <option value="all">全部</option>
          </select>
        </div>
      </div>

      <!-- 记录列表 -->
      <div class="records-list">
        <div v-if="records.length === 0" class="no-records">
          <p>这里还空空的呢... 记录下今天，开启你的戒烟日记吧！(>ω<)</p>
        </div>

        <div
          v-for="record in records"
          :key="record.date"
          :class="['record-item', { 'relapse-record': record.relapsed }]"
          @click="editRecord(record)"
        >
          <div class="record-sticky">
            <div class="record-date">
              <span class="date">{{ formatDateShort(record.date) }}</span>
              <span class="weekday">{{ getWeekday(record.date) }}</span>
            </div>

            <div class="record-content">
              <div class="record-mood">
                <span class="mood-emoji">{{ getMoodEmoji(record.mood) }}</span>
                <span class="mood-text">{{ getMoodText(record.mood) }}</span>
              </div>

              <div class="record-details">
                <span class="craving-level">
                  烟瘾强度: {{ record.cravings_intensity }}/10
                </span>
                <span v-if="record.relapsed" class="relapse-info">
                  复吸: {{ record.cigarettes_smoked }}支 😥
                </span>
              </div>

              <div v-if="record.notes" class="record-notes">
                {{ record.notes }}
              </div>
            </div>

            <div class="record-actions">
              <button @click.stop="editRecord(record)" class="edit-record-btn">
                编辑
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计图表 -->
    <div class="stats-section">
      <h2>趋势分析</h2>
      <div class="charts-grid">
        <div class="chart-card">
          <h3>心情趋势</h3>
          <div class="mood-chart">
            <div
              v-for="(record, index) in recentRecords"
              :key="index"
              :class="['mood-bar', getMoodClass(record.mood)]"
              :style="{ height: getMoodHeight(record.mood) + '%' }"
              :title="`date: ${record.date}, text: ${getMoodText(record.mood)}`"
            >
              <span class="mood-emoji-small">{{ getMoodEmoji(record.mood) }}</span>
            </div>
          </div>
        </div>

        <div class="chart-card">
          <h3>烟瘾强度趋势</h3>
          <div class="craving-chart">
            <div
              v-for="(record, index) in recentRecords"
              :key="index"
              class="craving-bar"
              :style="{ height: (record.cravings_intensity * 10) + '%' }"
              :title="`date: ${record.date}, intensity: ${record.cravings_intensity}`"
            >
              {{ record.cravings_intensity }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑记录模态框 -->
    <div v-if="editingRecord" class="modal-overlay" @click="closeEditModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>编辑记录 - {{ formatDate(editingRecord.date) }}</h3>
          <button @click="closeEditModal" class="close-btn">&times;</button>
        </div>

        <form @submit.prevent="updateRecord" class="edit-form">
          <div class="form-grid">
            <div class="form-group">
              <label for="edit-mood">心情</label>
              <div class="mood-selector">
                <div
                  v-for="(option, key) in moodOptions"
                  :key="key"
                  :class="['mood-option', { active: editForm.mood === key }]"
                  @click="selectEditMood(key)"
                  :title="option.text"
                >
                  <span class="mood-emoji">{{ option.emoji }}</span>
                  <span class="mood-label">{{ option.text }}</span>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label for="edit-cravings">烟瘾强度</label>
              <div class="slider-group">
                <input
                  id="edit-cravings"
                  v-model.number="editForm.cravings_intensity"
                  type="range"
                  min="0"
                  max="10"
                  step="1"
                  class="slider"
                />
                <div class="slider-info">
                  <span class="slider-min">0</span>
                  <span class="slider-value">{{ editForm.cravings_intensity }}/10</span>
                  <span class="slider-max">10</span>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="checkbox-label">
                <input
                  v-model="editForm.relapsed"
                  type="checkbox"
                  @change="onEditRelapseChange"
                />
                是否复吸
              </label>
            </div>

            <div v-if="editForm.relapsed" class="form-group">
              <label for="edit-cigarettes">吸烟数量</label>
              <input
                id="edit-cigarettes"
                v-model.number="editForm.cigarettes_smoked"
                type="number"
                min="0"
                max="100"
              />
            </div>
          </div>

          <div class="form-group">
            <label for="edit-notes">备注</label>
            <textarea
              id="edit-notes"
              v-model="editForm.notes"
              rows="3"
            ></textarea>
          </div>

          <div class="modal-actions">
            <button type="button" @click="closeEditModal" class="cancel-btn">
              取消
            </button>
            <button type="submit" class="save-btn" :disabled="loading">
              {{ loading ? '保存中...' : '保存' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 提示信息 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <div v-if="successMessage" class="success-message">
      {{ successMessage }}
    </div>
  </div>
</template>

<script>
import { dailyRecordApi } from '../api/index.js'

export default {
  name: 'DailyRecordView',
  data() {
    return {
      today: new Date().toISOString().split('T')[0],
      todayRecord: null,
      records: [],
      recentRecords: [],
      editingRecord: null,
      loading: false,
      error: '',
      successMessage: '',
      filterDays: '30',
      todayForm: {
        mood: '',
        cravings_intensity: 0,
        relapsed: false,
        cigarettes_smoked: 0,
        notes: ''
      },
      editForm: {
        mood: '',
        cravings_intensity: 0,
        relapsed: false,
        cigarettes_smoked: 0,
        notes: ''
      },
      moodOptions: {
        excellent: { text: '非常好', emoji: '😄', value: 5 },
        good: { text: '好', emoji: '😊', value: 4 },
        normal: { text: '一般', emoji: '😐', value: 3 },
        bad: { text: '差', emoji: '😔', value: 2 },
        terrible: { text: '非常差', emoji: '😢', value: 1 }
      }
    }
  },

  async mounted() {
    await Promise.all([
      this.loadTodayRecord(),
      this.loadRecords(),
      this.loadRecentRecords()
    ])
  },

  methods: {
    async loadTodayRecord() {
      try {
        // 模拟API调用
        console.log('加载今日记录...')
        
        // 模拟延迟
        await new Promise(resolve => setTimeout(resolve, 500))
        
        // 模拟今日记录数据
        const mockTodayRecord = null // 假设今天还没有记录
        
        this.todayRecord = mockTodayRecord
        
        if (mockTodayRecord) {
          this.todayForm = { ...mockTodayRecord }
        }
        
      } catch (error) {
        console.error('加载今日记录失败:', error)
      }
    },

    async loadRecords() {
      this.loading = true
      this.error = ''
      
      try {
        console.log('加载历史记录...')
        
        // 模拟延迟
        await new Promise(resolve => setTimeout(resolve, 800))
        
        // 模拟历史记录数据
        const mockRecords = [
          {
            date: '2024-09-06',
            mood: 'good',
            cravings_intensity: 3,
            relapsed: false,
            cigarettes_smoked: 0,
            notes: '今天感觉不错，虽然有点烟瘾但成功克制了'
          },
          {
            date: '2024-09-05',
            mood: 'normal',
            cravings_intensity: 5,
            relapsed: true,
            cigarettes_smoked: 2,
            notes: '压力比较大，没忍住抽了2支'
          },
          {
            date: '2024-09-04',
            mood: 'excellent',
            cravings_intensity: 2,
            relapsed: false,
            cigarettes_smoked: 0,
            notes: '感觉很棒！戒烟效果明显'
          },
          {
            date: '2024-09-03',
            mood: 'bad',
            cravings_intensity: 7,
            relapsed: false,
            cigarettes_smoked: 0,
            notes: '烟瘾很强烈，但坚持住了'
          }
        ]
        
        this.records = mockRecords
        
      } catch (error) {
        console.error('加载记录失败:', error)
        this.error = '加载记录失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },

    async loadRecentRecords() {
      try {
        // 加载最近7天的记录用于图表显示
        const mockRecentRecords = this.records.slice(0, 7)
        this.recentRecords = mockRecentRecords
      } catch (error) {
        console.error('加载最近记录失败:', error)
      }
    },

    async saveTodayRecord() {
      this.loading = true
      this.error = ''
      this.successMessage = ''
      
      try {
        const recordData = {
          date: this.today,
          ...this.todayForm
        }
        
        console.log('保存今日记录:', recordData)
        
        // 模拟延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        this.todayRecord = recordData
        this.successMessage = '今日记录保存成功！'
        
        // 更新历史记录列表
        await this.loadRecords()
        
        setTimeout(() => {
          this.successMessage = ''
        }, 3000)
        
      } catch (error) {
        console.error('保存记录失败:', error)
        this.error = '保存失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },

    editRecord(record) {
      this.editingRecord = record
      this.editForm = { ...record }
    },

    closeEditModal() {
      this.editingRecord = null
      this.editForm = {
        mood: '',
        cravings_intensity: 0,
        relapsed: false,
        cigarettes_smoked: 0,
        notes: ''
      }
    },

    async updateRecord() {
      this.loading = true
      this.error = ''
      
      try {
        console.log('更新记录:', this.editForm)
        
        // 模拟延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 更新本地数据
        const index = this.records.findIndex(r => r.date === this.editingRecord.date)
        if (index !== -1) {
          this.records[index] = { ...this.editForm }
        }
        
        this.closeEditModal()
        this.successMessage = '记录更新成功！'
        
        setTimeout(() => {
          this.successMessage = ''
        }, 3000)
        
      } catch (error) {
        console.error('更新记录失败:', error)
        this.error = '更新失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },

    onRelapseChange() {
      if (!this.todayForm.relapsed) {
        this.todayForm.cigarettes_smoked = 0
      }
    },

    onEditRelapseChange() {
      if (!this.editForm.relapsed) {
        this.editForm.cigarettes_smoked = 0
      }
    },

    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      })
    },

    formatDateShort(dateString) {
      return new Date(dateString).toLocaleDateString('zh-CN', {
        month: '2-digit',
        day: '2-digit'
      })
    },

    getWeekday(dateString) {
      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
      return '周' + weekdays[new Date(dateString).getDay()]
    },

    getMoodEmoji(mood) {
      return this.moodOptions[mood]?.emoji || '😐'
    },

    getMoodText(mood) {
      return this.moodOptions[mood]?.text || '一般'
    },

    getMoodHeight(mood) {
      return (this.moodOptions[mood]?.value || 3) * 20
    },

    getMoodClass(mood) {
      return `mood-${mood}`
    },

    selectMood(mood) {
      this.todayForm.mood = mood
    },

    selectEditMood(mood) {
      this.editForm.mood = mood
    }
  }
}
</script>

<style scoped>
.daily-record-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(135deg, #faf0ff 0%, #f0f9ff 100%);
  position: relative;
  overflow: hidden;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 添加漂浮装饰元素 */
.daily-record-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 198, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 90% 40%, rgba(180, 248, 200, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255, 209, 220, 0.2) 4px, transparent 4px),
    radial-gradient(circle at 70% 15%, rgba(162, 210, 255, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(255, 175, 204, 0.2) 2px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(255, 209, 220, 0.2) 3px, transparent 3px);
  background-size: 200px 200px;
  z-index: 0;
}

.daily-record-container > * {
  position: relative;
  z-index: 1;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  animation: slideInDown 0.8s ease-out;
}

.page-header h1 {
  color: #444444;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.page-header p {
  color: #888888;
  font-size: 16px;
  font-weight: 400;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 今日记录卡片 */
.today-record-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
}

.today-record-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.today-record-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(255, 198, 255, 0.1) 3px, transparent 3px),
    radial-gradient(circle at 90% 40%, rgba(180, 248, 200, 0.1) 2px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255, 209, 220, 0.1) 4px, transparent 4px),
    radial-gradient(circle at 70% 15%, rgba(162, 210, 255, 0.1) 3px, transparent 3px),
    radial-gradient(circle at 20% 70%, rgba(255, 175, 204, 0.1) 2px, transparent 2px),
    radial-gradient(circle at 85% 25%, rgba(255, 209, 220, 0.1) 3px, transparent 3px);
  background-size: 200px 200px;
  z-index: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-direction: row;
  gap: 15px;
  position: relative;
  z-index: 1;
}

.card-header h2 {
  color: #444444;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.status-badge {
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.status-badge.recorded {
  background: #d4edda;
  color: #155724;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.record-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.form-group label {
  font-weight: 500;
  color: #444444;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  border: 2px solid #A2D2FF;
  border-radius: 12px;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  z-index: 1;
  position: relative;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #FFD1DC;
  box-shadow: 0 0 0 2px rgba(255, 209, 220, 0.3);
  z-index: 2;
}

/* 心情选择器 */
.mood-selector {
  display: flex;
  gap: 15px;
  margin-top: 8px;
}

.mood-option {
  flex: 1;
  padding: 12px 8px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  background: white;
  position: relative;
  overflow: hidden;
}

.mood-option.active {
  background: #B4F8C8;
  border-color: #28a745;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(180, 248, 200, 0.4);
}

.mood-option:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.mood-emoji {
  font-size: 24px;
  display: block;
  margin-bottom: 4px;
}

.mood-label {
  font-size: 14px;
  color: #666;
}

/* 滑块样式 */
.slider-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.slider {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  background: #e0e0e0;
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD1DC 0%, #FFAFCC 100%);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(255, 175, 204, 0.4);
  transition: all 0.3s ease;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(255, 175, 204, 0.6);
}

.slider-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.slider-min,
.slider-max {
  font-size: 12px;
  color: #999;
}

.slider-value {
  min-width: 40px;
  text-align: center;
  font-weight: 500;
  color: #667eea;
  font-size: 14px;
}

/* 复选框样式 */
.checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 500;
  color: #444444;
  font-size: 14px;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.checkbox-label input[type="checkbox"] {
  width: auto !important;
  margin: 0;
}

/* 表单提交按钮 */
.save-btn {
  background: linear-gradient(135deg, #B4F8C8 0%, #A2D2FF 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 20px;
  cursor: pointer;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  box-shadow: 0 4px 10px rgba(162, 210, 255, 0.3);
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  font-size: 16px;
  font-weight: bold;
}

.save-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #A2D2FF 0%, #CDB4DB 100%);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 15px rgba(162, 210, 255, 0.4);
}

.save-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.save-btn::after {
  content: "💾";
  margin-left: 8px;
}

/* 历史记录 */
.history-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
}

.history-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  flex-direction: row;
  gap: 15px;
  position: relative;
  z-index: 1;
}

.section-header h2 {
  color: #444444;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.filter-controls select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.no-records {
  text-align: center;
  padding: 40px;
  color: #666;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.record-item {
  position: relative;
  overflow: hidden;
  min-height: 120px;
  cursor: pointer;
}

.record-sticky {
  background: white;
  border-radius: 12px;
  padding: 15px;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.record-sticky::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: #fff3cd;
  border: 2px dashed #CDB4DB;
  border-radius: 12px;
  z-index: 0;
  opacity: 0.8;
}

.record-item:hover .record-sticky {
  transform: translateY(-3px) rotate(2deg);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.record-item.relapse-record .record-sticky {
  background: #fff3cd;
  border-color: #FF9800;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.record-item.relapse-record .record-sticky::before {
  background: #fffde6;
}

.record-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding-right: 20px;
  border-right: 1px solid #e0e0e0;
  font-weight: bold;
}

.record-date .date {
  font-size: 16px;
  color: #333;
}

.record-date .weekday {
  font-size: 12px;
  color: #666;
}

.record-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 20px;
}

.record-mood {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mood-emoji {
  font-size: 20px;
}

.mood-text {
  font-weight: 500;
  color: #333;
}

.record-details {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
}

.relapse-info {
  color: #FF9800;
  font-weight: 500;
}

.record-notes {
  color: #666;
  font-size: 14px;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-actions {
  position: absolute;
  right: 15px;
  bottom: 15px;
  display: flex;
  align-items: center;
  z-index: 2;
}

.edit-record-btn {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #ddd;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s ease;
  z-index: 2;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.edit-record-btn:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}

/* 统计图表 */
.stats-section {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #A2D2FF;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
}

.stats-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFD1DC, #A2D2FF);
  border-radius: 0 0 20px 20px;
}

.stats-section h2 {
  color: #444444;
  margin-bottom: 25px;
  text-align: center;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.chart-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
  position: relative;
  overflow: hidden;
}

.chart-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #B4F8C8, #A2D2FF);
  border-radius: 0 0 15px 15px;
}

.chart-card h3 {
  color: #444444;
  margin-bottom: 15px;
  text-align: center;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.mood-chart,
.craving-chart {
  display: flex;
  align-items: end;
  gap: 10px;
  height: 180px;
  padding: 10px 0;
  background: linear-gradient(135deg, #f8f9ff 0%, #faf0ff 100%);
  border-radius: 8px;
  margin-top: 10px;
}

.mood-bar,
.craving-bar {
  flex: 1;
  background: #667eea;
  border-radius: 3px 3px 0 0;
  display: flex;
  align-items: end;
  justify-content: center;
  color: white;
  font-size: 12px;
  min-height: 20px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mood-bar:hover,
.craving-bar:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

.excellent .mood-bar {
  background: linear-gradient(90deg, #B4F8C8 0%, #88FFC4 100%);
}

.good .mood-bar {
  background: linear-gradient(90deg, #B4F8C8 0%, #D4F8E8 100%);
}

.normal .mood-bar {
  background: linear-gradient(90deg, #FFD1DC 0%, #FFEBF0 100%);
}

.bad .mood-bar {
  background: linear-gradient(90deg, #FFD1DC 0%, #FFE3E6 100%);
}

.terrible .mood-bar {
  background: linear-gradient(90deg, #FFAFCC 0%, #FFD1DC 100%);
}

.craving-bar {
  background: linear-gradient(90deg, #FFD1DC 0%, #FFAFCC 100%);
}

.mood-emoji-small {
  font-size: 14px;
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 编辑记录模态框 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.modal-content {
  background: white;
  border-radius: 20px;
  padding: 30px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  border: 2px solid #A2D2FF;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-header h3 {
  color: #444444;
  margin: 0;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  transition: color 0.3s ease;
}

.close-btn:hover {
  color: #666;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 20px;
}

.cancel-btn {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

/* 提示信息 */
.error-message {
  background: #fee;
  color: #c33;
  padding: 15px;
  border-radius: 6px;
  margin-top: 20px;
  text-align: center;
  border: 1px solid #fcc;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

.success-message {
  background: #efe;
  color: #393;
  padding: 15px;
  border-radius: 6px;
  margin-top: 20px;
  text-align: center;
  border: 1px solid #cfc;
  font-family: '方正准圆简体', '站酷快乐体', 'Comic Sans MS', cursive, sans-serif;
}

/* 动画效果 */
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.today-record-card,
.history-section,
.stats-section {
  animation: fadeIn 0.6s ease-out;
}

/* 媒体查询 */
@media (max-width: 768px) {
  .daily-record-container {
    padding: 15px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .mood-selector {
    flex-wrap: wrap;
  }
  
  .mood-option {
    flex: 1 0 45%;
    min-width: 45%;
  }
  
  .slider-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .record-sticky::before {
    display: none;
  }
  
  .record-sticky {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .record-actions {
    position: static;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
    margin-top: 15px;
  }
  
  .edit-record-btn {
    width: 100%;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-card {
    margin-bottom: 30px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .card-header,
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .record-content {
    padding-left: 0;
    margin-top: 15px;
  }
  
  .record-date {
    flex-direction: row;
    gap: 10px;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
  }
}
</style>